Dangerous UX: Consequential Options Close to Benign Options 防止誤操作

設計中，應將確認性操作和破壞性操作儘量遠離放置，並使用多重視覺提示區分它們，以避免使用者誤操作。比起幫助使用者糾正錯誤，預防錯誤的發生更為重要。當使用者在任務中途犯錯時，不得不打斷當前任務來解決問題，這需要消耗寶貴的認知資源，即使是幾秒鐘的錯誤修復也會增加使用者的操作負擔。無論撤銷功能多麼便捷，設計的目標始終應是避免使用者出錯，而不是僅僅提供糾正機制。

Firefox 內建的拼寫檢查功能將拼寫建議放在了新增錯誤拼寫到字典選項的旁邊。

示例問題

上下文選單中常見類似功能並排，易導致誤操作。例如，Firefox 拼寫檢查選單中"新增到字典"與"修正拼寫"相鄰，使用者可能誤將錯誤拼寫永久保留。設計師應注意使用者在重複任務中更易受習慣影響而誤操作。

其他設計誤區

Ubiquiti 的 Unifi 網路管理應用：在“新增類別”和“清除類別”按鈕位置相鄰且視覺上幾乎一致，清除類別的誤操作會導致使用者大量資料丟失。

ThinkorSwim 股票交易應用：交易時，“刪除”和“確認併傳送”按鈕相鄰，一旦誤點會對交易產生重大影響。

Trello 移動應用：在溢位選單中將“關注”和“歸檔卡片”相鄰放置，誤操作可能導致卡片意外歸檔。

防止誤操作的設計方法

1. 形狀編碼：分散使用者注意力的溝通方式

現代 UX 設計的起源之一在於心理學對工業設計的應用。二戰期間，Alphonse Chapanis 發現 B-17 轟炸機的起落架和襟翼控制桿形狀相同，這導致飛行員在緊張時容易混淆操作。他透過改變控制桿的形狀，減少了誤操作。透過物理形狀和阻力等元素，可以在使用者無意識狀態下區分不同控制，降低誤操作風險。

2. 區分控制的視覺訊號

當我們無法使用物理觸感來區分數字介面中的操作時，可以透過顏色、圖示、文字大小和對齊方式等視覺元素來區別不同功能。例如，Grammarly 將“拼寫建議”和“新增到字典”選項區分開來，透過顏色、圖示和文字對齊等視覺訊號降低誤點機率。

3. 拉開高風險操作與低風險操作的距離

透過增加高風險操作（如刪除、丟棄更改、設為預設等）與其他選項的間距，可以避免使用者無意中誤觸此類操作。根據 Fitts 定律（Fitts' Law），即使增加幾毫秒的點選時間，也可以顯著降低誤操作的可能性。例如，Sonos 的 iOS 應用在“轉移系統所有權”和“忘記當前系統”等高風險選項之間新增了額外空間，使使用者更清晰地區分不同的操作。

避免將高風險的操作與無害操作直接放在一起。透過增加空間和使用多重視覺訊號，將關鍵選項與其他相關選項有效區分，以減少使用者誤操作的可能性。